<!--
 * @Author: 叫我龟先生 yyxxkahhh@163.com
 * @Date: 2022-09-26 17:42:38
 * @LastEditors: 叫我龟先生 yyxxkahhh@163.com
 * @LastEditTime: 2022-09-28 00:30:39
 * @FilePath: \tabbar\src\components\MyTable.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <table class="table table-bordered table-stripped">
    <!-- 表格标题区域 -->
    <thead>
      <!-- 4.5不是固定的，要放一个插槽 -->
      <tr>
        <!-- <th>#</th>
        <th>商品名称</th>
        <th>价格</th>
        <th>标签</th>
        <th>操作</th> -->
      </tr>
      <slot name="head"></slot>
    </thead>
    <!-- 表格主体区域 -->
    <tbody>
    <!-- 4.4把请求的数据渲染进来 -->
      <tr v-for="item in arr"
      :key="item.id"
      >
        <!-- <td>{{item.id}}</td>
        <td>{{item.goods_name}}</td>
        <td>{{item.goods_price}}</td>
        <td>{{item.tags}}</td>tags
        <td><button class="btn btn-danger btn-sm">删除</button></td> -->

        <!-- 4.5不是固定的，要放一个插槽 -->
       <slot name="body" :row='item'></slot>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  //4.3子组件接收
props:{
  arr:Array
},
  name: 'MyTable'
}
</script>


<style scoped lang="less">
.my-goods-list {
  .badge {
    margin-right: 5px;
  }
}
</style>